<!-- 测评结果 -->
<template>
	<view>
		<view class="top"></view>
		<view class="bodys">
			<block v-if="bar">
				<heads :text="resultText1" :imgUrl="imgUr"></heads>
			</block>
			<block v-if="!bar">
				<!-- 情绪 -->
				<heads :text="resultText5"></heads>
			</block>
			<view class="items">
				<pie></pie>
			</view>
		</view>
		<view class="kongs"></view>
		<view class="body" v-if="bar">
			<!-- 肥胖等测试结果的引入 -->
			<block>
				<heads :text="resultText2" :imgUrl="imgUr2"></heads>
				<view class="items">
					<bar></bar>
					<view class="item dis dis2 dis3">
						<text v-for="(item,index) in list" :key="index">{{item.text}}</text>
					</view>
				</view>
			</block>
		</view>
		<!-- 情绪组件的引入 -->
		<view v-if="!bar">
			<emotion :emotion="emotion"></emotion>
		</view>
		<view>
			<list :text1="text1" :text2="text2" :text3="text3" :text4="text4" :text5="text5" :text6="text6" :text7="text7"
			 :text8="text8" :pindex="pindex"></list>
		</view>
		<!-- <bton></bton> -->

	</view>
</template>

<script>
	let app = getApp().globalData;
	import pie from '@/components/pie.vue';
	import bar from '@/components/bar.vue';
	import heads from '@/components/head.vue';
	import emotion from '@/components/emotion.vue';
	import list from '@/components/consequence.vue';
	import bton from '@/components/botn.vue'
	export default {
		components: {
			pie,
			bar,
			heads,
			emotion,
			list,
			bton
		},
		data() {
			return {
				list: [{
					text: '无需关注'
				}, {
					text: '稍加关注'
				}, {
					text: '适度关注'
				}, {
					text: '重点关注'
				}, {
					text: '密切关注'
				}],
				resultText1: '',
				imgUr: '/static/stiati/icon_2.png',
				resultText2: '各因素建议关注程度',
				imgUr2: '/static/stiati/icon_3.png',
				resultText5: '',
				imgUr2: '/static/stiati/icon_3.png',
				bar: true, //显示情绪还是肥胖
				emotion: 80, //情绪指数
				text1: '',
				text2: '',
				text3: '',
				text4: '',
				text5: '',
				text6: '',
				text7: '',
				text8: '',
				pindex: 0

			};
		},
		methods: {

		},
		created() {
			console.log(app.resultData)
			let zhibiaolist = app.resultData.zhibiaolist;
			let resultData = app.resultData;
			if (resultData.template.indexOf('{special}') != -1) {
				resultData.template = resultData.template.replace(/{special}/g, resultData.special);
			}
			this.resultText1 = `${resultData.type}因素占比`
			let text1 = resultData.template.split("{result}")[0];
			this.text1 = text1.replace(/\n/g, '');
			this.text2 = resultData.result;
			console.log('text1', text1)
			let text2 = resultData.template.split("{result}，")[1];
			// if (text2) {
			console.log('text2', text2)
			let text3 = (text2.split("关注。")[0]).replace(/{chengdu}/g, `${resultData.chengdu}。`);
			console.log('text3', text3)
			let text4 = text2.split("关注。")[1];
			console.log('text4', text4)
			let text5 = `，${text3}${text4.split("，但")[0]}。`;
			let text6 ='';
			let text7 ='';
			let text8='';
			if (text5.indexOf('{result2}') != -1) {
				text5 = text5.replace(/{result2}/g, `${resultData.result2}`);
				text8 = (text2.split('{zhengzhuang}')[1]).split('调理建议：')[0];
			}else{
				 text6 = (text4.split("关注，")[1]).replace(/{result}/g, resultData.result);
				 text7 = text6.split('{zhengzhuang}')[0];
				 text8 = (text6.split('{zhengzhuang}')[1]).split('调理建议：')[0];
			}
			if (text5.indexOf('：{zhengzhuang}') != -1) {
				text5 = text5.split("：{zhengzhuang}")[0]
			}
			this.text3 = text5;
			console.log('text5', text5)
			console.log('text7', text7)
			this.text4 = text7;
			this.text5 = resultData.zhengzhuang;
			this.text6 = text8
			console.log('text8', text8)
			// }
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";
	// page{
	// 	background-color: #FBF2D6;
	// }
	.top {
		width: 750upx;
		height: 324upx;
		// background: linear-gradient(180deg, #3CC288 0%, #F8F8F8 100%);
		position: relative;
	}

	.bodys {
		width: 686upx;
		height: 618upx;
		background: #FFFFFF;
		border-radius: 24upx;
		position: absolute;
		top: 48upx;
		left: 32upx;

		.items {
			width: 100%;
			height: 489upx;
		}
	}

	.kongs {
		width: 100%;
		height: 380upx;
	}

	.body {
		width: 686upx;
		// min-height: 421upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin: auto;
		padding-bottom: 35upx;

		.items {
			width: 100%;
			height: 428upx;
			position: relative;

			.item {
				position: absolute;
				width: 500upx;
				height: 60upx;

				bottom: 0upx;
				right: 40upx;
				font-size: 22upx;
				font-family: $typeface;
				font-weight: 500;
				color: #999999;

			}
		}
	}
</style>
